<template>
    <div class="smile">
        <div class="smile-title" :class="{animate:isShow,wo:isHidden}">
            <div>
                <img src="../assets/images/yinhao.png" alt="">
                <p><span>我可以肯定地说一件事：全家的健康饮食都来自与FARM！"</span></p>
                <h3>亚当.沃尔什</h3>
                <section>家庭主妇</section>
            </div>
        </div>
        <div class="smile-img">
            <img src="../assets/images/smile.jpg" alt="">
        </div>
    </div>
</template>

<script>
     export default {
        data(){
            return {
                isShow:false,
                isHidden:true  
            }
        }, 
        mounted(){
            window.addEventListener('scroll',function(){ 
            var scrollTop = document.documentElement.scrollTop || document.body.scrollTop; 
                if(scrollTop >= 2400){
                   this.isShow = true;
                   this.isHidden = false;
            }
        }.bind(this))
    }
}
</script>

<style scoped>
p{margin:0;padding:0;font-size: 22px;color: rgb(51, 51, 51);}
h3{margin:0;padding:0;font-weight:normal;color:rgb(68, 68, 68);}
section{font-size:14px;color: rgb(68, 68, 68);}
    .smile{
        display:flex;
        line-height:1.7;
       
    }
    .smile-title{
        width:52%;
    }
    .smile-title div{
        width:48%;
        text-align: center;
        margin: 20% auto;
    }
    .smile-img{
        width:48%;
       
    }
    .smile-img img{
        width:100%;
        height:100%;
    }
</style>